$width: 30px;
$banWidth: 15px;
:deep(.vdr-handle) {
  border: 2px solid var(--el-color-primary);
  border-radius: 7px;
  background-color: #fff;
}
:deep(.my-handle-tm) {
  width: $width;
  border-radius: 5px;
  border-color: var(--el-color-primary);
}
:deep(.vdr-handle-tm) {
  margin-left: -$banWidth;
}
:deep(.vdr-handle-bm) {
  margin-left: -$banWidth;
}
:deep(.vdr-handle-ml) {
  margin-top: -$banWidth;
}
:deep(.vdr-handle-mr) {
  margin-top: -$banWidth;
}
:deep(.my-handle-bm) {
  width: $width;
  border-radius: 5px;
  border-color: var(--el-color-primary);
}
:deep(.my-handle-ml) {
  height: $width;
  border-radius: 5px;
  border-color: var(--el-color-primary);
}
:deep(.my-handle-mr) {
  height: $width;
  border-radius: 5px;
  border-color: var(--el-color-primary);
}
:deep(.vdr-container.active) {
  border-color: var(--el-color-primary);
  border-style: solid;
  border-width: 2px;
}
